<template>
	<div id="customerCenter">
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			喜绿客服中心
			<div></div>
		</div>
		<div class="header-null"></div>
		<div class="customer-list">
			<div class="customer-list-item" v-for="item in tab">
				<div class="customer-list-item-title">
					<img :src="item.imgs"/>{{item.name}}&nbsp;&nbsp;{{item.chinaName}}
				</div>
				<div class="customer-list-item-phone">
					{{item.phone}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tab: [
					{
						name:'HEEKGROUP',
						chinaName: '咨询台',
						phone: 13450774794,
						imgs: '../../static/img/icon/find_icon/phone@2x.png'
					},
					{
						name:'HEEKGROUP',
						chinaName: '售后电话',
						phone: 18038637318
					},
					{
						name:'HEEKGROUP',
						chinaName: '加盟热线',
						phone: 18925969575
					}
				]
			}
		}
	}
</script>

<style scoped lang="less">
	#customerCenter {
		background: #eee;
	}

	.customer-list {
		margin-top: 10px;
		text-align: center;
		font-size: 12px;
		background: #fff;
		
		.customer-list-item {
			padding: 20px 0;
			border-bottom: 1px solid #eee;
			text-align: center;
			
			.customer-list-item-title {
				margin-bottom: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				img {
					margin-right: 10px;
				}
			}
			
			.customer-list-item-phone {
				color: #c9eb59;
				border: 1px solid #7B7B7B;
				border-radius: 10px;
				padding: 5px 30px;
				text-align: center;
				display: inline-block;
			}
		}
	}

</style>